<script>
export default {
  name: "forKey",
  data() {
    return {
      list: [1, 2, 3, 4],
      obj: {
        name: "小明",
        age: 18
      },
      list1: [{id: 1, title: "title1"}, {id: 2, title: "title2"}, {id: 3, title: "title3"}],
      listObj: [{
        id: 1, title: "title1", section: [{
          id: 1, sectionName: "介绍、环境搭建、变量"
        }, {
          id: 2, sectionName: "介绍、环境搭建、变量"
        }, {
          id: 3, sectionName: "介绍、环境搭建、变量"
        }]
      },
        {
          id: 2, title: "title2", section: [{
            id: 1, sectionName: "介绍、环境搭建、变量"
          }, {
            id: 2, sectionName: "介绍、环境搭建、变量"
          }, {
            id: 3, sectionName: "介绍、环境搭建、变量"
          }]
        },
        {
          id: 3, title: "title3", section: [{
            id: 1, sectionName: "介绍、环境搭建、变量"
          }, {
            id: 2, sectionName: "介绍、环境搭建、变量"
          }, {
            id: 3, sectionName: "介绍、环境搭建、变量"
          }]
        }]

    }
  }
}
</script>

<template>
  <div>
    <router-view></router-view>
    <div>{{ list[0] }}</div>
    <div>{{ list[1] }}</div>
    <div>{{ list[2] }}</div>
    <div>{{ list[3] }}</div>
    <!--  遍历数组-->
    <div v-for="(item,index) in list" :key="index">{{ item }}=={{ index }}</div>
    <!--  遍历数字-->
    <div v-for="num in 10" :key="num">{{ num }}</div>
    <!--  遍历对象-->
    <div v-for="(value,key,index) in obj" :key="index">
      {{ value }}==={{ key }}==={{ index }}
    </div>
    <!--  遍历数组-->
    <div v-for="(item,index) in list1" :key="index">
      {{ item.id }}
    </div>
    <div v-for="(item,index) in listObj" :key="index">
      {{ item.title }}
      <div v-for="(itemsec,indexsec) in item.section" :key="indexsec">
        {{ itemsec }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>